<template>
	<view class="grey text " :class="$tm.vx.state().tmVuetify.black ? 'black bk' : ''" :style="{ height: bodyHeight + 'px' }">
		<tm-menubars title="购物车商品操作列表" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
		<tm-sheet>下面展示了不同的位置和暗黑模式，如果想知道如何操作，请见模板示例。</tm-sheet>
		<tm-cartBarFood position="bottom" color="blue" btnColor="bg-gradient-red-accent"></tm-cartBarFood>
		<tm-cartBarFood
			:black="true"
			:safe="false"
			label=""
			btnText="确认订购"
			btnColor="bg-gradient-pink-accent"
			:offset-left="16"
			:top="360"
			:round="24"
			color="pink"
			position="top"
		></tm-cartBarFood>
	</view>
</template>

<script>
/**
 * 实例不同于外卖（原生app），直接显示所有列表，为了不卡，
 * 每次点击类目都是重新加载数据列表，只显示一列，不显示所有。
 */
	import tmCartBarFood from "@/tm-vuetify/components/tm-cartBarFood/tm-cartBarFood.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	export default {
		components:{tmCartBarFood,tmMenubars,tmFullView,tmSheet},
	data() {
		return {
			
			bodyHeight: 50
		};
	},
	mounted() {
		let sy = uni.getSystemInfoSync();
		this.bodyHeight = sy.windowHeight;
	},
	methods: {}
};
</script>

<style></style>
